<template>
  <!-- 公司计量统计 -->
  <div class="project-meter-statistic-box">
    <div class="CardItems-box">
      <CardItems
        ref="projectMeterStatisticItemsRef"
        :card-config="cardConfig"
        :pop-config="popConfig"
        :select-config="selectConfig"
        :header-config="headerConfig"
        :dynamic-select-list="selectList"
        @selectChange="selectChange"
      />
    </div>
  </div>
</template>

<script>
import CardItems from '@/components/CardItems'
import { cardConfig } from './config/cardConfig'
import { popConfig } from './config/popConfig'
import { headerConfig } from './config/tableConfig'
import { selectConfig } from './config/selectConfig'

export default {
  name: 'ProjectMeterStatistic',
  components: {
    CardItems
  },
  data() {
    return {
      selectList: []
    }
  },
  computed: {
    /**
     * 卡片配置
     */
    cardConfig() {
      return cardConfig['project-meter-statistic'] || {}
    },
    /**
     * 弹窗配置
     */
    popConfig() {
      return popConfig['project-meter-statistic'] || {}
    },
    /**
     * 筛选配置
     */
    selectConfig() {
      return selectConfig['project-meter-statistic'] || []
    },
    /**
     * 表头配置
     */
    headerConfig() {
      return headerConfig['project-meter-statistic'] || []
    }
  },
  methods: {
    /**
     * @param selectData   回传表单的选择数据
     * @param prop        事件触发的表单字段
     * @param selectList  回传的表单配置项
     */
    selectChange(selectData, prop, selectList) {
      this.selectList = JSON.parse(JSON.stringify(selectList))
      if (prop === 'type') {
        this.changeType(selectData, prop, selectList)
      }
    },
    /**
     * 切换统计方式 修改时间显示格式
     */
    changeType(selectData, prop, selectList) {
      const btConfig = selectList[1]
      const etConfig = selectList[2]
      const types = { '1': 'date', '2': 'date', '3': 'month', '4': 'year' }
      const formats = { '1': 'yyyy-MM-dd', '2': 'yyyy-MM-dd', '3': 'yyyy-MM', '4': 'yyyy' }
      const type = types[selectData[prop]]
      const format = formats[selectData[prop]]
      const btConf = {
        ...btConfig.selectConfig,
        type, format, valueFormat: format
      }
      btConfig.selectConfig = btConf
      const etConf = {
        ...etConfig.selectConfig,
        type, format, valueFormat: format
      }
      etConfig.selectConfig = etConf
      this.$set(this.selectList, 1, { ...btConfig })
      this.$set(this.selectList, 2, { ...etConfig })
      delete selectData[btConfig.prop]
      delete selectData[etConfig.prop]
      this.$refs.projectMeterStatisticItemsRef.setSelectModuleValue({
        ...selectData
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.project-meter-statistic-box {
  display: flex;
  width: 100%;
  height: 100%;

  .CardItems-box {
    flex: 1;
  }

}
</style>

<style>
.project-meter-statistic-box .td-device-count span {
  color: #20a0ff;
  cursor: pointer;
}
</style>
